<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d{
				width: 200px;
				height: 50px;
				position: absolute;
				top: 10px;
				left: 10px;
				background: #666666;
			}
		</style>
	</head>
	<body>
		<div id="d"></div>
		<script>
			var d=document.getElementById("d");
			
			var isdown=false;
			
			var x=0,y=0,lx=0,ly=0;
			
			d.onmousedown=function(e){
				var event=e||window.event;
				x=event.clientX;
				y=event.clientY;
				lx=d.offsetLeft;
				ly=d.offsetTop;
				console.log(x,y,lx,ly)
				isdown=true;
				d.style.cursor="move";
			}
			
			window.onmousemove=function(e){
				if(!isdown){
					return;
				}
				var event=e||window.event;
				
				
				
				d.style.top=e.clientY-(y-ly)+"px";
				d.style.left=e.clientX-(x-lx)+"px";
			}
			d.onmouseup=function(){
				isdown=false;
				d.style.cursor="default";
			}
		</script>
	</body>
</html>
